﻿/* ---------------------------------------------------------------------------
VPort
--------------------------------------------------------------------------- */
if (!Gaia.Extensions)
    Gaia.Extensions = Class.create();

Gaia.Extensions.VPort = function(element, options) {
    this.initialize(element, options);
}

// Inheriting from WebControl
Object.extend(Gaia.Extensions.VPort.prototype, Gaia.WebControl.prototype);

// More boilerplate stuff...
// Copy/paste and change the FUNCTIONS within actual class...!!
Object.extend(Gaia.Extensions.VPort.prototype, {
    initialize: function(element, options) {
        // Calling base class constructor
        this.initializeWebControl(element, options);

        this.initializeVPort();
    },

    initializeVPort: function(element, options) {

        // set visibility
        if (this.options.hide > 0) {
            if (this.options.hide == 1)
                this.onHideFirst();
            else this.onHideSecond();
        }
                
        this.options.pnlHidden = 0;
    },

    onDropped: function(space) {        
        var id = this.element.id;
        if (this.options.orientation == "Horizontal"){            
            var width = this.element.style.width.replace(/px/, "");
            $(id + '_FV').style.width = space + 'px';
            $(id + '_SV').style.width = width - 5 - space + 'px';
        }   
        else{
            var height = this.element.style.height.replace(/px/, "");
            $(id + '_FV').style.height = space + 'px';
            $(id + '_SV').style.height = height - 5 - space + 'px';
        }
        return this;
    },
    
    onHideFirst: function() {

        var id = this.element.id;
        
        var FVName = id + '_FV';
        var SVName = id + '_SV';
        var DraggerName = id + '_d';
        var ToggleName = id + '_t';

        var SV = $(SVName);

        if (this.options.orientation == 'Horizontal')
        {
            var width = this.element.style.width.replace(/px/, "");
            new Effect.Parallel([
                  new Effect.Morph(SVName, { sync: true, style: 'width:' + width + 'px;' }),
                  new Effect.Morph(FVName, { sync: true, style: 'margin-left: -' + $(FVName).style.width + ';' })
                ], {
                duration: 0.2,
                afterFinish: function() {
                    $(ToggleName).appear({ duration: 0.2 });
                    SV.style.width = (width - 15) + 'px';
                }
            });
        }
        else
        {
            var height = this.element.style.height.replace(/px/, "");
            new Effect.Parallel([
                  new Effect.Morph(SVName, { sync: true, style: 'height:' + height + 'px;' }),
                  new Effect.Morph(FVName, { sync: true, style: 'margin-top: -' + $(FVName).style.height + ';' })
                ], {
                duration: 0.2,
                afterFinish: function() {
                    $(ToggleName).appear({ duration: 0.2 });
                    SV.style.height = (height - 15) + 'px';
                    SV.style.marginTop = '0px';
                }
            });
        }
                
        SV.style.marginLeft = '0px';
        $(DraggerName).hide();
        this.options.pnlHidden = 1;
        return this;
    },

    onHideSecond: function() {

        var id = this.element.id;
        
        
        var FVName = id + '_FV';
        var SVName = id + '_SV';
        var DraggerName = id + '_d';
        var ToggleName = id + '_t';

        var SV = $(SVName);

        $(ToggleName).appear({ duration: 0.2 });
        SV.style.position = 'relative';
        if (this.options.orientation == 'Horizontal')
        {        
            var width = this.element.style.width.replace(/px/, "");
            SV.style.left = SV.style.width;
            SV.style.marginLeft = '-' + SV.style.width;
            new Effect.Morph(FVName, { style: 'width:' + (width - 15) + 'px;', duration: 0.2, afterFinish: function() { SV.hide(); } });
            $(DraggerName).hide();
            $(FVName).style.marginLeft = '0px';
        }
        else
        {
            var height = this.element.style.height.replace(/px/, "");
            SV.style.top = SV.style.height;
            SV.style.overflow = 'hidden';
            SV.style.marginTop = '-' + SV.style.height;
            new Effect.Morph(FVName, { style: 'height:' + (height - 15) + 'px;', duration: 0.2, afterFinish: function() { SV.hide(); } });
            $(DraggerName).hide();
            $(FVName).style.marginTop = '0px';
        }
        this.options.pnlHidden = 2;
        return this;
    },

    onShow: function(leftWidth, rightWidth) {

        var id = this.element.id;
        var ToggleName = id + '_t';
        var FVName = id + '_FV';
        var SVName = id + '_SV';
        var DraggerName = id + '_d';

        var SV = $(SVName);

        if (this.options.pnlHidden == 1) {
            $(ToggleName).hide();
            if (this.options.orientation == 'Horizontal')
            {
                new Effect.Parallel([
                  new Effect.Morph(FVName, { style: 'margin-left: -5px;' }),
                  new Effect.Morph(SVName, { style: 'width:' + rightWidth + ';' })
                ], {
                    duration: 0.2,
                    afterFinish: function() {
                        $(DraggerName).show();
                        $(SVName).style.marginLeft = '5px';
                    } 
                });
            }
            else
            {
                new Effect.Parallel([
                  new Effect.Morph(FVName, { style: 'margin-top: -5px;' }),
                  new Effect.Morph(SVName, { style: 'height:' + rightWidth + ';' })
                ], {
                    duration: 0.2,
                    afterFinish: function() {
                        $(DraggerName).show();
                        $(SVName).style.marginTop = '5px';
                    } 
                });
            }
        }
        else {
            SV.show();
            
            if (this.options.orientation == 'Horizontal')
            {        
                new Effect.Morph(FVName, { style: 'width:' + leftWidth + ';', duration: 0.2,
                    afterFinish: function() {
                        $(DraggerName).show();
                        SV.style.height = '';
                        SV.style.left = '';
                        SV.style.marginLeft = '5px';
                        SV.style.position = '';
                        $(FVName).style.marginLeft = '-5px';
                    }
                });
            }
            else
            {
                new Effect.Morph(FVName, { style: 'height:' + leftWidth + ';', duration: 0.2,
                    afterFinish: function() {
                        $(DraggerName).show();
                        //SV.style.height = '';
                        SV.style.overflow = '';
                        SV.style.top = '';
                        SV.style.marginTop = '5px';
                        SV.style.position = '';
                        $(FVName).style.marginTop = '-5px';
                    }
                });
            }

            $(ToggleName).hide();
        }

        this.options.pnlHidden = 0;
        return this;
    }
    

});

Gaia.Extensions.VPort.browserFinishedLoading = true;
